import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  Image,
} from 'react-native';
import SignatureCapture from 'react-native-signature-capture'
import RNFS from 'react-native-fs'
import {Actions} from 'react-native-router-flux'

// const path = RNFS.DocumentDirectoryPath + 'test.txt'
const path = '/storage/emulated/0/saved_signature/'

export default class App extends Component<{}> {

  constructor(props) {
    super(props)
    this.state = {
      imgData: '',
      signOk:false
    }
  }

  saveImage(data) {

    const {saveSuccess, signImgs, upload, signWordType, signWordAction,thisPressIn,thisPressOut} = this.props
    const newPath = path + signImgs.length + '.png'

    this.setState({
      imgData: data
    })

    RNFS.copyFile(path + 'signature.png', newPath)
      .then((success) => {
        upload({uri: newPath, name: 'test.png', type: signWordType, signWordAction: signWordAction})
      }).catch((err) => {
      // console.log(err.message)
    })

    const imgData = {type: 'signImgs', path: newPath, base64: data}

    // Actions.push('Sign')//签到
    // Actions.push('RectifyBill')//整改单
  }

//{/*viewMode={"landscape"}*/}
  render() {
    const {signOK} = this.state
    return (
      <View style={styles.container}>
        <SignatureCapture
          style={[{flex: 6},styles.signature]}
          ref="sign"
          onSaveEvent={(e) => this._onSaveEvent(e)}
          onDragEvent={this._onDragEvent}
          saveImageFileInExtStorage={true}
          showNativeButtons={false}
          showTitleLabel={false}
        />

        <View style={{ flex: 1, flexDirection: "row" }}>
          <TouchableHighlight
            style={styles.buttonStyle}
            onPress={() => { signOK?alert('正在保存签名'):this.saveSign() } }>
            <View>
              <Text style={{ fontSize: 16}}>保存</Text>
            </View>
          </TouchableHighlight>

          <TouchableHighlight
            style={styles.buttonStyle}
            onPress={() => { this.resetSign() } }>
            <View >
              <Text style={{ fontSize: 16}}>清空</Text>
            </View>
          </TouchableHighlight>
        </View>
        {/*<View style={{flex: 2, alignItems: 'center', justifyContent: 'center'}}>*/}
          {/*{*/}
            {/*this.state.imgData !== '' ?*/}
              {/*<Image style={{width: 500, height: 120}} source={{uri: `data:image/png;base64,${this.state.imgData}`}}/>*/}
              {/*:*/}
              {/*<Image style={{width: 200, height: 120}} source={require('../../assets/imgs/avatar.png')}/>*/}
          {/*}*/}
        {/*</View>*/}
      </View>
    );
  }

  saveSign() {
    this.refs["sign"].saveImage();
      this.setState({
        signOK:true
      })
  }

  resetSign() {
    this.refs["sign"].resetImage();
  }

  _onSaveEvent(result) {
    //result.encoded - for the base64 encoded png
    // result.pathName
    this.saveImage(result.encoded)
  }

  _onDragEvent() {
    // This callback will be called when the user enters signature
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: 'center',
  },
  signature: {
    borderColor: '#000033',
    borderWidth: 4,
    width: '90%',
    marginTop: 10,
  },
  buttonStyle: {
    flex: 1, justifyContent: "center", alignItems: "center", height: 50,
    backgroundColor: "#ffffff",
    // backgroundColor:'#3bb7df',
    borderRadius: 10,
    margin: 10
  }
});